<template>
    <view class="page-buy-list">
        <view class="flex-align-items padding-30-24">
            <image class="top-icon" src="../../static/ibs/img_personal_hint.png" mode="aspectFit"></image>
            <text class="top-text">如果您发布的求购成交，无论是否在本平台成交，请告知客服，我们将根据订单被查看的次数，为您提供信息分红。</text>
        </view>
        <switch-tab class="switch-tab" :data="data" :priceparams="priceparams" :params="params" ref="switchTab"
                    :optionParam="optionParam" :bottomparams="bottomparams" @closeTrade="showClose">
        </switch-tab>
        <confirm-dialog v-if="showCloseDialog" @confirm="confirmClose" @cancel="closeDialog">

        </confirm-dialog>
        <view class="hideCanvas">
            <canvas canvas-id="myCanvas" :style="{width:shareData.windowWidth+'px',height:shareData.windowHeight+'px'}" />
        </view>
        <share-box v-if="isShowShareBox" @closeShare="closeShareBox"></share-box>
    </view>
</template>
<script>
    import switchTab from '@/components/tab/switchTab.vue';
    import confirmDialog from '@/components/dialog/confirmDialog.vue';
    import shareBox from '@/components/dialog/shareBox.vue';
    import shareCanvas from '@/common/canvas/shareCanvas.js'
    import api from '@/common/api.js';   //请求API方法
    export default {
        components: {
            switchTab,
            confirmDialog,
            shareBox
        },
        data() {
            return {
                data: [

                ],
                priceparams: [
                    {
                        label: '采购意向价格',
                        key: 'intentPrice',
                        labelClass: ['label-class'], // 标签的样式
                        valueClass: ['value-class'] // 内容样式
                    },
                    {
                        label: '要求',
                        key: 'remarkDemand',
                        labelClass: ['label-class'], // 标签的样式
                        valueClass: ['value-class']
                    }
                ],
                params: [
                    {
                        labelIcon: '../../static/ibs/img_personal_number.png',
                        label: '查看求购人数',
                        key: 'seeCount',
                        iconClass: ['icon-class']
                    },
                    {
                        labelIcon: '../../static/ibs/img_personal_offer.png',
                        label: '已收到的报价',
                        key: 'quoteCount',
                        iconClass: ['icon-class']
                    }
                ],
                optionParam: {
                    optionClass: ['view-price'],
                    label: '查看',
                    labelClass: ['info-button'],
                    optionClick: this.viewQoute,
                    tipPoint: true // 是否显示有未读报价的提示
                },
                bottomparams: [
                    {
                        label: '分享',
                        labelIcon: '../../static/ibs/img_personal_share.png',
                        delimiter: ' ',
                        showLabel: true,
                        clickable: true, // 是否设置监听点击事件
                        baseClass: ['base-single'],
                        labelClass: ['bottom-label-class'],
                        iconClass: ['icon-class']
                    },
                    {
                        label: '编辑',
                        labelIcon: '../../static/ibs/img_personal_revise.png',
                        delimiter: ' ',
                        showLabel: true,
                        clickable: true, // 是否设置监听点击事件
                        baseClass: ['base-single'],
                        labelClass: ['bottom-label-class'],
                        iconClass: ['icon-class']
                    },
                    {
                        label: '关闭',
                        labelIcon: '../../static/ibs/img_personal_cancel.png',
                        delimiter: ' ',
                        showLabel: true,
                        clickable: true, // 是否设置监听点击事件
                        baseClass: ['base-single'],
                        labelClass: ['bottom-label-class'],
                        iconClass: ['icon-class']
                    }
                ],
                shareData:{
                    demandInfo: {
                        city: '深圳',
                        contactMobileNo: '132123456789',
                        countryOrigin: '澳大利亚',
                        publishTime: '3小时前',
                        id: 1111111,
                        intentPriceBottom: 0,
                        intentPriceBottomVo: 'string',
                        intentPriceTop: 0,
                        intentPrice: '90-100',
                        isPay: true,
                        isQuote: true,
                        isSelf: false,
                        province: 'string',
                        remarkRemand: 'JBS现货',
                        status: 'string',
                        vendorNo: '42厂',
                        weight: '4.5吨',
                        goodsName: '大黄瓜条',
                        isRead: false, // 是否存在未读报价信息,true：存在，false：不存在 ,
                        quoteCount: 5, // 报价人数
                        seeCount: 20 // 查看人数 ,
                    },
                    windowWidth:'',
                    windowHeight:696,
                    pixelRatio:1
                },
                showCloseDialog: false, // 是否显示确认关闭求购的弹框
                isShowShareBox: false, // 是否显示确认分享的弹框
                optionData: null // 操作的数据
            };
        },
        onLoad() {
            console.log('buyList---------onLoad');
            this.getSysinfo();
        },
        onShareAppMessage:function(res){
            console.log('onShareAppMessage: ' + JSON.stringify(res));
            let that = this;
            that.isShowShareBox = false;
            return {
                title: that.getShareTitle(),
                path: "pages/demand/index?id=" + that.shareData.demandInfo.id,
                imageUrl: uni.getStorageSync('shareCanvasPic'),
                success:(res) => {
                //	that.isShowShareBox = false;
                },
                fail:(res) => {
                    uni.showToast({
                        icon:'none',
                        title:'分享失败'
                    });
                //that.isShowShareBox = false;
                }
            };
            /*var that = this;
            return new Promise(function(resolve, reject) {
                shareCanvas.getSharePic(that.shareData).then((data) => {

                    console.log('url = "pages/my/buyList?id=" + that.shareData.id');
                    console.log(JSON.stringify(data));
                    that.isShowShareBox=false;  //关闭分享窗口，小程序回调返回不稳定
                    return {
                        title: that.getShareTitle(),
                        path: "pages/my/buyList?id=" + that.shareData.demandInfo.id,
                        imageUrl: uni.getStorageSync('shareCanvasPic'),
                        success:(res) => {
                        //	that.isShowShareBox = false;
                        },
                        fail:(res) => {
                            uni.showToast({
                                icon:'none',
                                title:'分享失败'
                            });
                        //that.isShowShareBox = false;
                        }
                    };
                });
            });*/
        },
        methods: {
            getSysinfo:function(){
                var that = this;
                uni.getSystemInfo({
                    success: function (res) {
                        that.shareData.windowWidth= res.windowWidth,
                        that.shareData.windowHeight= 696,
                        that.shareData.pixelRatio = 750/res.windowWidth
                    }
                });
            },
            /**
             * 确认关闭我的求购
             **/
            confirmClose() {
                let that = this;
                api.httpRequest('/wechat/user/closeDemand?demandId='+this.optionData.id + '&version=' + this.optionData.version, {}, 'POST', true).then((res) => {
                    console.log(JSON.stringify(res));
                    if (res.code === 200) {
                        that.showToast(res.message);
                        that.showCloseDialog = false;
                        this.$refs.switchTab.getData(1, false);
                    } else {
                        that.showError(res.message)
                    }

                });
                this.showCloseDialog = false;

            },
            // 关闭dialog
            closeDialog() {
                this.showCloseDialog = false;
            },
            showClose(data, param) {
                this.optionData = data;
                if (param.label === '关闭') {
                    this.showCloseDialog = true;
                } else if (param.label === '编辑') {
                    this.goTo('/pages/demand/buyInfo?id=' + data.id);
                } else {
                    let that = this;
                    this.shareData.demandInfo = data;
                    this.submitShare();
                    shareCanvas.getSharePic(that.shareData).then((data) => {
                        console.log('url = "pages/my/buyList?id=" + that.shareData.id');
                        console.log(JSON.stringify(data));
                        that.isShowShareBox=true;  //关闭分享窗口，小程序回调返回不稳定
                    });
//                    this.isShowShareBox = true;
                }
            },
            /**
             * 查看报价
             *
             */
            viewQoute(data) {
                console.log('viewquote---: ' +JSON.stringify(data));
                this.goTo('/pages/my/quoteList?id=' + data.id);
            },
            // 关闭分享弹出框
            closeShareBox (){
                this.isShowShareBox = false;
            },
            // 分享我的求购数据时调用接口统计分享数据
            submitShare() {
                api.httpRequest('/wechat/user/shareDemand?demandId=' + this.optionData.id, {}, 'POST').then((res) => {

                });
            }
        }
    };
</script>
<style>
    page {
        height: 100%;
    }
    ::-webkit-scrollbar{

        width: 0;

        height: 0;

        color: transparent;

    }
    .hideCanvas{
        width:100vw;
        position:fixed;
        top:0;
        left:100vw;
    }
    .page-buy-list {
        background-color: #f2f2f5;
        height: 100%;
    }
    .page-buy-list .flex-align-items {
        display: flex;
        vertical-align: middle;
        font-size: 28upx;
        color: #1a1a1a;
        background-color: #ffffff;
        align-items: center;
        justify-content: space-between;
    }
    .page-buy-list .padding-30-24 {
        padding: 30upx 24upx;
        border-top: 1px #e5e5e5 solid;
        border-bottom: 1px #e5e5e5 solid;
    }
    .page-buy-list .top-icon {
        width: 68upx;
        height: 68upx;
    }
    .page-buy-list .top-text {
        width: 100%;
        margin-left: 28upx;
        line-height: 44upx;
    }
    .page-buy-list .switch-tab {
        width: 100%;
        height: 100%;
        margin-top: 20upx;
        background-color: #FFFFFF;
    }
    .page-buy-list .view-price {
        width: 100%;
        height: 112upx;
        flex-shrink: 0;
        margin-bottom: 9upx;
        text-align: left;
        display: flex;
        align-items: flex-end;

    }

    .page-buy-list .info-button {
        width: 100upx;
        height: 48upx;
        line-height: 48upx;
        margin-left: 20upx;
        text-align: center;
        border-radius: 24upx;
        border: 2upx #077131 solid;
        color: #077131;
        font-weight: bold;
        font-size: 20upx;
        align-self: flex-end;
    }
    .components-price-info .base-single {
        height: 68upx;
        line-height: 68upx;
        width: 100%;
        vertical-align: middle;
        display: flex;
        align-items: center;
        background-color: white;
    }
    .components-price-info .bottom-label-class {
        width: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 26upx !important;
        color: #4c4c4c;
        vertical-align: middle;
        text-align: left;
        display:flex;
        align-items:center;
        justify-content: center;
    }
    .components-price-info .label-class {
        width: auto;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 26upx !important;
        color: #1a1a1a;
        vertical-align: middle;
        text-align: left;
    }

    .components-price-info .value-class {
        width: 100%;
        color: #1a1a1a;
        font-size: 26upx !important;
        vertical-align: middle;
        text-align: left;
    }
    .components-price-info .icon-class {
        width: 32upx;
        height: 32upx;
        margin-right: 10upx;
    }
</style>